;(function(){
    const template=`    <!--体育栏目-->
    <div>
        <ul>
            <li v-for="sport in sportArr" :key="sport.id" >
                <!--
                    注意:to中是js表达式，就需要使用v-bind绑定 to属性
                    而且单引号不要少了
                -->
                <router-link :to="'/news/sport/detail/' + sport.id">{{sport.title}}</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>  `
    window.Sport={
        template:template,
        data() {
            return {
                sportArr:[],
            }
        },
        created() {
            this.getSportArr();
        },
        methods: {
            getSportArr(){
                axios.get("http://127.0.0.1:5500/vue-08-router/02-bootstrap-vue-router/sport.json")
                .then((res)=>{
                    this.sportArr=res.data;
                })
            }
        },
    }
})()